<!DOCTYPE html>
<html lang="zxx" class="no-js" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Mobile Specific Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <!-- Favicon -->
    <link rel="shortcut icon" href="/img/fav.png" />
    <!-- Author Meta -->
    <meta name="author" content="colorlib" />
    <!-- Meta Description -->
    <meta name="description" content="" />
    <!-- Meta Keyword -->
    <meta name="keywords" content="" />
    <!-- meta character set -->
    <meta charset="UTF-8" />
    <!-- Site Title -->
    <title>Course Details</title>
    <!--
      CSS
      =============================================
    -->
    <link rel="stylesheet" href="/css/linearicons.css" />
    <link rel="stylesheet" href="/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <link rel="stylesheet" href="/css/magnific-popup.css" />
    <link rel="stylesheet" href="/css/owl.carousel.css" />
    <link rel="stylesheet" href="/css/nice-select.css">
    <link rel="stylesheet" href="/css/hexagons.min.css" />
    <link rel="stylesheet" href="/css/main.css" />
</head>

<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
    <nav class="navbar navbar-expand-lg  navbar-light">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <img src="/img/logo.png" alt="" />
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="lnr lnr-menu"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="courses.html">Courses</a></li>
                    <!-- Dropdown -->
                    <li class="dropdown">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown">
                            Pages
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="elements.html">Elements</a>
                            <a class="dropdown-item" href="course-details.html">Course Details</a>
                        </div>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown">
                            Blog
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="blog-home.html">Blog Home</a>
                            <a class="dropdown-item" href="blog-single.html">Blog Details</a>
                        </div>
                    </li>
                    <li><a href="contacts.html">Contacts</a></li>

                    <li>
                        <button class="search">
                            <span class="lnr lnr-magnifier" id="search"></span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="search-input" id="search-input-box">
        <div class="container">
            <form class="d-flex justify-content-between">
                <input type="text" class="form-control" id="search-input" placeholder="Search Here" />
                <button type="submit" class="btn"></button>
                <span class="lnr lnr-cross" id="close-search" title="Close Search"></span>
            </form>
        </div>
    </div>
</header>
<!-- ================ End Header Area ================= -->

<!-- ================ start banner Area ================= -->
<section class="banner-area">
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-12 banner-right">
                <h1 class="text-white">
                    Course Details
                </h1>
                <p class="mx-auto text-white  mt-20 mb-40">
                    In the history of modern astronomy, there is probably no one greater leap forward than the
                    building.
                </p>
                <div class="link-nav">
                        <span class="box">
                            <a href="index.html">Home </a>
                            <i class="lnr lnr-arrow-right"></i>
                            <a href="courses.html">Courses </a>
                            <i class="lnr lnr-arrow-right"></i>
                            <a href="course-details.html">Course Details</a>
                        </span>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ================ End banner Area ================= -->

<!--================ Start Course Details Area =================-->
<section class="course-details-area section-gap">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 right-contents">
                <ul class="roots">
                </ul>
                <a href="#" class="btn text-uppercase enroll">Enroll the course</a>
            </div>
            <div class="col-lg-8 course-details-left">
                <!--<div class="main-image">-->
                    <!--<img class="img-fluid" src="/img/courses/course-details.jpg" alt="">-->
                <!--</div>-->
                <div class="content-wrapper">

                    <h4 class="title">Course Outline</h4>
                    <div class="content">
                        <ul class="course-list path-list">
                            <li class="justify-content-between d-flex path-item">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--================ End Course Details Area =================-->

<!-- ================ start footer Area ================= -->
<footer class="footer-area section-gap">
    <div class="container">
        <div class="row">
            <div class="col-lg-2 col-md-6 single-footer-widget">
                <h4>Top Products</h4>
                <ul>
                    <li><a href="#">Managed Website</a></li>
                    <li><a href="#">Manage Reputation</a></li>
                    <li><a href="#">Power Tools</a></li>
                    <li><a href="#">Marketing Service</a></li>
                </ul>
            </div>
            <div class="col-lg-2 col-md-6 single-footer-widget">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="#">Jobs</a></li>
                    <li><a href="#">Brand Assets</a></li>
                    <li><a href="#">Investor Relations</a></li>
                    <li><a href="#">Terms of Service</a></li>
                </ul>
            </div>
            <div class="col-lg-2 col-md-6 single-footer-widget">
                <h4>Features</h4>
                <ul>
                    <li><a href="#">Jobs</a></li>
                    <li><a href="#">Brand Assets</a></li>
                    <li><a href="#">Investor Relations</a></li>
                    <li><a href="#">Terms of Service</a></li>
                </ul>
            </div>
            <div class="col-lg-2 col-md-6 single-footer-widget">
                <h4>Resources</h4>
                <ul>
                    <li><a href="#">Guides</a></li>
                    <li><a href="#">Research</a></li>
                    <li><a href="#">Experts</a></li>
                    <li><a href="#">Agencies</a></li>
                </ul>
            </div>
            <div class="col-lg-4 col-md-6 single-footer-widget">
                <h4>Newsletter</h4>
                <p>You can trust us. we only send promo offers,</p>
                <div class="form-wrap" id="mc_embed_signup">
                    <form target="_blank" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01"
                          method="get" class="form-inline">
                        <input class="form-control" name="EMAIL" placeholder="Your Email Address" onfocus="this.placeholder = ''"
                               onblur="this.placeholder = 'Your Email Address '" required="" type="email">
                        <button class="click-btn btn btn-default text-uppercase">subscribe</button>
                        <div style="position: absolute; left: -5000px;">
                            <input name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value="" type="text">
                        </div>

                        <div class="info"></div>
                    </form>
                </div>
            </div>
        </div>
        <div class="footer-bottom row align-items-center">
            <p class="footer-text m-0 col-lg-8 col-md-12">
                <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved |
                <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
            <div class="col-lg-4 col-md-12 footer-social">
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-dribbble"></i></a>
                <a href="#"><i class="fa fa-behance"></i></a>
            </div>
        </div>
    </div>
</footer>
<!-- ================ End footer Area ================= -->

<script src="/js/vendor/jquery-2.2.4.min.js"></script>
<script src="/js/vendor/bootstrap.min.js"></script>
<script src="/js/jquery.ajaxchimp.min.js"></script>
<script src="/js/jquery.magnific-popup.min.js"></script>
<script src="/js/parallax.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/jquery.sticky.js"></script>
<script src="/js/hexagons.min.js"></script>
<script src="/js/jquery.counterup.min.js"></script>
<script src="/js/waypoints.min.js"></script>
<script src="/js/jquery.nice-select.min.js"></script>
<script src="/js/main.js"></script>
<script>
    var areaList = {};
    var directoryEntity = {};

    $(function () {
        $.ajax({
            type:"get",
            url:"/area/list",
            success:function (res) {
                areaList = res;
                $.each(areaList, function (i, item) {
                    $(".roots").append(
                        '<li>\n' +
                        '                        <a class="justify-content-between d-flex root-item" href="javascript:;">\n' +
                        '                            <p>'+item.alias+'</p>\n' +
                        '                            <span class="or">查看</span>\n' +
                        '                        </a>\n' +
                        '                    </li>')
                });

                $(".root-item").each(function (i, item) {
                    $(this).on('click', function (e) {
                        $.ajax({
                            type:"get",
                            url:"/area/dir/"+areaList[i].id,
                            success: function (res) {
                                directoryEntity = res;
                                render();
                            }
                        })
                    })
                });
            }
        });
    });

    function render() {
        console.log("开始渲染列表");

        // 查看是否有可渲染的数据
        if (! directoryEntity.directories
            && ! directoryEntity.files){
            // 没有可渲染的数据
            return;
        }
        // 先移除列表内所有节点
        $(".path-item").remove();

        if (directoryEntity.directories){
            // 渲染子目录
            $.each(directoryEntity.directories, function (i, item) {
                $(".path-list").append(
                    '<li class="justify-content-between d-flex path-item directory-item">\n' +
                    '                                <p>'+item.name+'</p>\n' +
                    '                                <a class="btn text-uppercase directory-enter" href="javascript:;">进入</a>\n' +
                    '                            </li>')
            });

            // 绑定事件
            $(".directory-enter").each(function (i, element) {
                $(this).on('click', function (e) {
                    console.log("进入子目录");
                    $.ajax({
                        type: "get",
                        url: "/directory/dir/"+directoryEntity.directories[i].id,
                        success:function (result) {
                            directoryEntity = result;
                            render()
                        }
                    })
                })
            })
        }

        if (directoryEntity.files){
            // 渲染子文件列表
            $.each(directoryEntity.files, function (i, item) {
                $(".path-list").append(
                    '<li class="justify-content-between d-flex path-item file-item">\n' +
                    '                                <p>'+item.name+'</p>\n' +
                    '                                <a class="btn text-uppercase file-view" href="javascript:;">查看</a>\n' +
                    '                            </li>')
            });

            // 绑定查看事件
            $(".file-view").each(function (i, element) {
                $(this).on('click', function (e) {
                    console.log("查看文件");
                    window.location.href="/view/"+directoryEntity.files[i].id;
                })
            })
        }

        console.log("列表渲染结束");
    }
</script>
</body>

</html>